<template>
  <div class="shopcar-box">
    <head1></head1>
    <el-row class="time" type="flex" justify="end">
      <el-col><div class="time1"><img src="../assets/img/shopcar/time1.png"></div></el-col>
    </el-row>
    <el-row class="myshopcar" type="flex" justify="start">
      <el-col :span="2" :offset="2"><div class="myshopcar-div">我的购物车</div></el-col>
    </el-row>
    <el-row class="shopcar-content" type="flex" justify="center">
      <el-col :span="20">
        <div class="content">
          <el-table :data="tableData" @selection-change="gettatal">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="shoes_img">
              <template slot-scope="scope"><img :src="scope.row.shoes_img" class="goods-img"/></template>
            </el-table-column>
            <el-table-column label="商品" prop="shoes_name" width="300"></el-table-column>
            <el-table-column label="价格" prop="price">
              <template slot-scope="scope">
                {{scope.row.price | keepTwoNum}}
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center" width="300" prop="shoes.num">
              <template slot-scope="scope">
                <el-input-number size="small" :min="1" :max="5" v-model="scope.row.shoes_num"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="小计" prop="price">
              <template slot-scope="scope">
                <span>{{scope.row.price*scope.row.shoes_num | keepTwoNum}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="deletedshopcar(scope.row.car_id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-row class="shopbtn" type="flex" justify="center">
          <div class="shopbtn-div tatal-goods">
          <el-col :span="16" :offset="1"><span class="keepshopping" @click="keepshopping">继续购物</span></el-col>
          <el-col :span="4"><p>总计：<span class="sums">￥{{tatal | keepTwoNum}}</span></p></el-col>
          <el-col :span="3"><div class="settlement fl" @click="gotopay">去结算吧</div></el-col>
          </div>
        </el-row>
      </el-col>
    </el-row>
    <footer1></footer1>
  </div>
</template>
<script>
import head1 from '@/components/head'
import footer1 from '@/components/footer'
import http from '@/utils/HttpUtil'
export default {
  filters: {
    keepTwoNum (value) {
      value = Number(value)
      return value.toFixed(2)
    }
  },
  data () {
    return {
      action: {
        selectshopcar: 'shoes_Web_exploded/Shopcar/selectPageShopcarById',
        deletedShopcar: 'shoes_Web_exploded/Shopcar/deletedShopcar'
      },
      userId: '',
      tatal: 0,
      tableData: [],
      shoes_id: '',
      shoes_img: '',
      num: 0,
      name: '',
      price: ''
    }
  },
  components: {
    head1,
    footer1
  },
  computed: {

  },
  methods: {
    deletedshopcar (id) {
      this.$confirm('您正在执行批量删除操作', '提示', {
        confirmButtonText: '残忍丢弃',
        cancelButtonText: '容我想想',
        type: 'warning'
      }).then(() => {
        http.xhrPost(this, this.action.deletedShopcar + '/' + id, null, (res) => {
          this.$message({
            type: 'success',
            message: res.message
          })
          this.getShopcar()
        })
      })
    },
    gettatal (tableData) {
      this.tatal = 0
      this.shoes_id = ''
      this.num = 0
      this.name = ''
      this.price = ''
      this.shoes_img = ''
      tableData.forEach((item, index) => {
        this.tatal += item.price
      })
      tableData.forEach((item, index) => {
        this.shoes_id += item.shoes_id
      })
      tableData.forEach((item, index) => {
        this.num += item.shoes_num
      })
      tableData.forEach((item, index) => {
        this.name += item.shoes_name
      })
      tableData.forEach((item, index) => {
        this.price += item.price
      })
      tableData.forEach((item, index) => {
        this.shoes_img += item.shoes_img
      })
    },
    // gettatall (tableData) {
    //   this.sumprice = 0
    //   tableData.forEach((item, index) => {
    //     this.sumprice += item.price * item.count
    //   })
    // },
    getSession () {
      this.userId = sessionStorage.getItem('user_id')
    },
    getShopcar (curr_page = 1, page_size = 10) {
      const params = {
        'curr_page': curr_page,
        'page_size': page_size
      }
      http.xhrPost(this, this.action.selectshopcar + '/' + this.userId, params, (res) => {
        console.log(res)
        this.tableData = res.data.list
      })
    },
    gotopay () {
      // eslint-disable-next-line
      if (this.shoes_id != '') {
        sessionStorage.setItem('shoes_num', this.num)
        sessionStorage.setItem('shoes_id', this.shoes_id)
        sessionStorage.setItem('shoes_img', this.shoes_img)
        sessionStorage.setItem('shoes_name', this.name)
        sessionStorage.setItem('price', this.price)
        this.$router.push('/conforder')
      } else {
        this.$message({
          type: 'warning',
          message: '请至少选择一件商品'
        })
      }
    },
    keepshopping () {
      this.$router.push('/home')
    }
  },
  mounted () {
    this.getSession()
    this.getShopcar()
  }
}
</script>

<style lang="scss">
@import '../assets/style/common.scss';
  .shopcar-box{
    background: #f4f4f4;
    .time {
      margin-bottom: 20px;
      .time1 {
        background-color: white;
        height: 106px;
        width: 100%;
        position: relative;
        img {
          position: absolute;
          width: 419px;
          height: 46px;
          right: 150px;
          top: 30px;
        }
    }
    }
    .myshopcar {
      margin-bottom: 20px;
      .myshopcar-div {
        height: 28px;
        width: 120px;
        background: #c01a20;
        line-height: 28px;
        vertical-align: middle;
        text-align: center;
        color: #fff;
      }
    }
    .shopcar-content {
      .content {
        margin-bottom: 30px;
        background-color: #fff;
        .goods-img {
          height: 100px;
          width: 100px;
        }
      }
      .shopbtn {
        margin-bottom: 30px;
        .shopbtn-div{
          height: 60px;
          width: 100%;
          background-color: white;
          line-height: 60px;
          vertical-align: middle;
          .keepshopping {
            height: 100%;
            color: #757575;
            font-size: 16px;
            color: $red;
            cursor: pointer;
          }
          .sums {
            font-size: 26px;
            color: $red;
          }
          p {
            color: $red;
          }
          .settlement {
            height: 100%;
            width: 100%;
            background: #e0e0e0;
            color: #b0b0b0;
            text-align: center;
            &:hover {
              background-color: $red;
              color: white;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
</style>
